<template>
  <div class="container" :style="{ height: container.height+'px'}">
    <span style="color: #eee">
      {{`width: ${width}`}}<br>
      {{`height: ${container.height}`}}<br>
      {{`ratio: ${ratio}`}}<br>
    </span>

  </div>
</template>


<script>

const ratio = 760/1536

export default {
  name: "index",
  data() {
    return {
      container: {
        height: document.documentElement.clientWidth*ratio
      },
      width: document.documentElement.clientWidth,
      ratio,
    }
  },
  mounted() {
    var that = this
    window.onresize = () => {
      return (() => {
        that.container.height = document.documentElement.clientWidth*this.ratio
        that.width = document.documentElement.clientWidth
      })()
    };
  },
  methods: {

  }
}
</script>

<style scoped>
.container {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #333;
}
</style>


